import React, { useEffect, useRef, useState } from 'react';
import useSocket from '../../hooks/useSocket';
import { Button, Form, Input, Modal } from 'antd';
import './socket.css';
function User() {
    const user_id = '266';
    const refdiv = useRef(null);
    const [list, setList] = useState([]);
    const { connectSocket, wsRef } = useSocket(user_id);
    const connect = () => {
        connectSocket();
        wsRef.current.onopen = () => {
            wsRef.current.send(JSON.stringify({ type: 'getChatList' }));
            console.log('连接成功');
            heartFun();
        };
        wsRef.current.onmessage = (e) => {
            console.log(JSON.parse(e.data));
            const { type, data } = JSON.parse(e.data);
            if (type == 'getChatList') {
                setList(data);
                setTimeout(() => {
                    refdiv.current.scrollTop = 99999;
                }, 10);
            } else if (type == 'addMessage') {
                wsRef.current.send(JSON.stringify({ type: 'getChatList' }));
            } else if (type == 'heartbeat') {
                localStorage.setItem('heartbeat', Date.now());
            }
            // setList(JSON.parse(e.data));
            // console.log(setList);
        };
        wsRef.current.onerror = () => {};
        wsRef.current.onclose = () => {};
    };
    const onFinish = (value) => {
        if (!value.text) {
            Modal.error({
                title: '不能为空',
            });
        }
        wsRef.current.send(
            JSON.stringify({
                type: 'addMessage',
                data: { message: value.text, type: 'text' },
            })
        );
    };
    const ref1 = useRef(null);
    const ref2 = useRef(null);
    const heartFun = () => {
        ref1.current = setInterval(() => {
            wsRef.current.send(JSON.stringify({ type: 'heartbeat' }));
        }, 5000);
        ref2.current = setInterval(() => {
            const time = localStorage.getItem('heartbeat');
            const now = Date.now();
            if (now - time >= 5000) {
                Modal.error({
                    title: '连接断开',
                });
                wsRef.current.close();
                connect();
            }
        }, 10000);
    };
    useEffect(() => {
        connect();
    }, []);

    return (
        <div className="main">
            <div className="headtop" ref={refdiv}>
                {list.map((item, index) => {
                    if (item.user_id == user_id) {
                        return (
                            <div className="list1" key={index}>
                                <img
                                    src={item.other_avatar}
                                    className="img9"
                                    alt=""
                                />
                                <p>{item.message}</p>
                            </div>
                        );
                    } else {
                        return (
                            <div className="list2" key={index}>
                                <img
                                    src={item.user_avatar}
                                    className="img9"
                                    alt=""
                                />
                                <p>{item.message}</p>
                            </div>
                        );
                    }
                })}
            </div>
            <div className="footer">
                <Form onFinish={onFinish}>
                    <Form.Item name="text">
                        <Input />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit">发送</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default User;
